<template>
    <div class="body-bg">
        <img class="bgone" src="../assets/1.jpg" />
        <img class="pic" src="../assets/a.png" />
        <el-form ref="loginForm" :model="loginForm" label-position="right" label-width="auto" show-message>
           <div class="table">
                <img class="logo" src="../assets/logo.png" />
                <div class="wel">海天咨询智能品控系统</div>
                <!-- <div class="wel1">ZHI NENG PIN KONG</div> -->
                <div class="user">
                    <el-form-item prop="loginPassword">
                    <div id="yonghu" style=""><img src="../assets/yhm.png" /></div>
                        <input type="text" name="" placeholder="用户名" v-model="loginForm.loginName"/>
                    </el-form-item>	
                </div>

                <div class="password">
                    <div id="yonghu"><img src="../assets/mm.png" /></div>
                    <input type="password" name="密码" placeholder="●●●●●●" v-model="loginForm.loginPassword"/>
                </div>
                <input class="btn" type="button" @click="toHome" name="登录" value="登录" />
                 <div>
                <span class="tips">海天工程咨询有限公司&nbsp;&nbsp;&nbsp;&nbsp;版权所有</span>
            </div>
            </div> 
           
        </el-form>
       
    </div>
</template>
<script>
    export default {
        data(){
            return{
                
                loginForm: {
                    loginName: '',
                    loginPassword: '',
                    checked:false
                },
                //  loginFormRules: {
                //     loginName: [
                //         {required: true, message: '手机号不可为空', trigger: 'blur'}
                //     ],
                //     loginPassword: [
                //         {required: true, message: '密码不可为空', trigger: 'blur'}
                //     ]
                // }
            }
        },
        created(){
           
        },
        methods: {
            toHome(){
                if(this.loginForm.loginName != '' && this.loginForm.loginPassword != ''){
                        this.$http.post("/Login", {
                            telPhone: this.loginForm.loginName,
                            passWord: this.loginForm.loginPassword
                        }).then(result => {
                            this.data = result.data;
                            if(this.data.status == "200"){
                                var ses = window.sessionStorage;
                                var d = JSON.stringify(this.data.data);
                                ses.setItem('data',d);
                                localStorage.setItem('userMess', d);
                                this.$router.push("/myObject");
                            }else if(this.data.status == "500"){
                                this.$message.error('密码错误,请重试！');
                            }else{
                                console.log("请输入正确的信息");
                            }
                        })
                        .catch(err => {
                        });
                    }
                    else{
                         this.$message.error('手机号和密码不能为空，请确认后再次登录');
                    }
                }
                
           }
    }
</script>
<style lang="stylus" scoped>
*{
    font-family: "微软雅黑";
    font-size: 16px;
    border: 0;
    padding: 0;
    margin: 0;
    color: #666;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.body-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow-y: auto;
    background-color: #fff;
}
.logo{
    float: left;
    height: 3.5rem;
    margin-top: -7rem;
    margin-left: 16rem;
}
.bgone{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;right: 0;left: 0;bottom: 0;margin: auto;
}
.pic{
	width: 492px;
	height: auto;
	position: absolute;
	top:173px;right: 453px;left: 0;bottom: 0;margin: auto;
	z-index: 99999;
}
.table{
	background-color: #FFFFFF;
	width: 960px;
	height: 465px;
	position: absolute;
	top:20%;right: 0;left: 0;bottom: 0;margin: auto;
}
.password{
     position: absolute;
     top: 12.8rem;
     right: 4rem;
     display: flex;
}
.btn{
    position: absolute;
    top: 18.5rem;
    right: 3.9rem;
    border: none;
    color: #fff;
    width: 373px;
    text-align: center;
    background-color: #1592ef;
    text-indent: 0rem;
    border-radius: 10px;
    text-shadow:2px 2px 1px rgba(0, 0, 0, 0.2);
    box-shadow:2px 2px 1px rgba(0, 0, 0, 0.2);
    font-size:20px ;
    height: 50px;
}

.wel{
width: 960px;
    height: 35px;
    color: #fff;
    font-size: 36px;
    position: absolute;
    top: -7rem;
    text-align: center;
   
    
}.wel1{
	width: 960px;
	height: 35px;
	color: #fff;
    font-size: 12.38px;
    position: absolute;
    top: -4rem;
    text-align: center;    
   
}
input{	 
     height: 55px;
     width: 373px;
     text-indent: 55px;
     outline:none;
     background: #eef6fd;
     border-bottom:2px #d6e7fa solid ;
}
.password input{
	border: 0;
}
.user{
	 position: absolute;
     top: 7.8rem;
     right:4rem;
     display: flex;	
}

#yonghu img{
	height: 30px;
	position: absolute;
	left: 10px;
	top: 13px;
}
.tips{
    float: left;
    font-size: 14px;
    margin-top: 30rem;
    margin-left: 25rem;
    margn: 30 0 0 auto;
}
</style>